<template>
  <div class="main">
    <mtop @handleFiexdToolItem="handleFiexdToolItem" />
    <div class="" :class="show ? 'h5' : ''">
      <div class="sheader" id="mint">
       
        <div class="haerbox">
          <div class="title">{{$t("m.stitle")}} </div>
        <h1 class="banner-title">{{$t('m.shxls')}}</h1>
        <div class="cop">
       {{$t('m.shxljj')}}
        </div>
        <div class="cop">
          {{ $t('m.mpxljj') }}
        </div>
          <div class="cop">
          {{ $t('m.wmxljj') }}
        </div>
        </div>
      </div>

      <div class="white">
        <div class="card">
          <div class="box">
            <div class="intro">
             
              <div class="middle fadeIn" >
                   <div class="imglist"> 
                   <img
                   :src="nftImg"
                  alt=""
                  class="img1"
                />
                </div>
                <!-- <div v-else> -->
                <div class="p1" @click="fistLoad">{{ Maxnum }}/{{Max}}<span class="dw"> {{$t('m.mei')}}</span></div>
                <div class="p2">{{contAddress|yingcang}}</div>
                <div class="p3">
                  <img src="../assets/img/usdt.png" alt="" />
                  <!-- <span v-if="mlist.indexOf(userWallet) !== -1">Free</span> -->
                  <span>{{ (price * buynum).toFixed(2) }}</span>
                  <!-- <span class="dew">{{unit}}</span> -->
                </div>
                <van-stepper v-model="buynum" :max="MintMax" input-width="80px" :min="0" @change="jsmint" button-size="32px"  :disabled="sqloading" class="mint" />

                <div v-if="!userWallet" class="check-btn" @click="wallet()">
                {{$t('m.glqb')}}
                </div>

                <van-button
                  type="primary"
                  v-if="userWallet"
                  class="check-btn"
                  :disabled="mintDisabled"
                  :loading-text="$t('m.zzz')"
                  :loading="sqloading"
                  @click="bftoMint"
                  >{{$t('m.djzz')}}</van-button
                >
                <!-- </div> -->
              </div>
       
            </div>
          </div>
        </div>
      </div>

      <div class="rule" >
        <div class="card">               
          <div class="hcbg">{{$t('m.faxingguize')}}</div>
          <div class="p">{{$t('m.fxmx')}}</div>
          <div class="p">{{$t('m.gfsm')}}</div>
          <div class="p ns">{{$t('m.gfsms')}}</div>
          <div class="p">{{$t('m.zzxz')}}</div>
          <div class="p ns">{{$t('m.zzxzs')}}</div>
          <!-- <img src="../assets/img/zzgz.png" alt="" class="gzbg" v-if="dqyy=='zh-CN'">
          <img src="../assets/img/zzgzx.png" alt="" class="gzbg" v-else> -->
        </div>
         <!-- <div class="card">               
          <div class="hcbg">NextGen {{$t('m.jiazhi')}}</div>
          <img src="../assets/img/fxgz.png" alt="" class="gzbg" v-if="dqyy=='zh-CN'">
          <img src="../assets/img/fxgzx.png" alt="" class="gzbg" v-else>
        </div> -->
      </div>
    </div>

    <van-popup
      v-model="Mintshow"
      round
      :close-on-click-overlay="sqloading"
      closeable
    >
      <div class="popup" :class="show ? 'popuph5' : ''" v-if="!sqloading">
        <div class="title">{{$t('m.gxnhd')}}</div>
        <div class="boxs mh">
          <div class="item fadeInUp" >
            <!-- <img :src="item" alt="" class="sbg" v-if="item" /> -->
           <div class="bh" v-if="!sqloading">
              <span class="idtxt">x{{buynum}}</span>
            </div>

            <div class="mbg" v-if="!sqloading">
              <img :src="bsImg" alt=""  class="img" />
            </div>
          </div>
          <div class="mbg" v-if="sqloading"> 
          <img src="../assets/img/mbg.png" alt="" class="sbg" />
          <div class="zzz">{{$t('m.zzz')}}</div>
          </div>
        </div>
        <div class="bottom">
          <van-button
            v-if="!sqloading"
            type="primary"
            @click="close"
            class="btn"
          >
            <!-- loading-text="铸造中..." :loading="sqloading" -->
            {{$t('m.qr')}}</van-button
          >
        </div>
      </div>
    </van-popup>
  <buy
      :show="bdshow"
      :data="plandata"
      @tshow="
        (val) => {
          bdshow = val;
        }"
      @updata="
        (val) => {          
          bdshow = false;
          this.toMint(val)
        }
      "/>
      <Binding
      :show="Mbdshow"
      :data="plandata"
      @tshow="
        (val) => {
          Mbdshow = val;
        }"
      @updata="
        (val) => {
          Mbdshow = false;
          this.toMints(val)
        }
      "/>
      
    <!-- <mbottom /> -->
  </div>
</template>

<script>
import mtop from "../components/top.vue";
import mbottom from "../components/bottom.vue";
import buy from '../components/buy.vue'
import Binding from '../components/binding.vue'
import {
  connectTron,
  ConstructMerkleTree,
  getCost,
  getPrice,
  tokenURI,
  walletOfOwner,
  gettotal,
  getApprove,
  setApprove,
  ADDRESS_NFT,
  ImgV1,
  Img,
  getmaxTokenNum,
  getnumLimitPerMint,
  toSing,getmyUsdt
} from "@/api/Public";
export default {
  data() {
    return {
      mintDisabled: true, // 铸造按钮禁用
      show: false,
      timer: false,
      screenWidth: document.body.clientWidth,
      sqloading: false,
      buynum: 0,
      Cbuy: true, // 是否售罄，超过最大购买量   false 售罄
      Mintshow: false,
      Cmint: true, // 是否可以铸造
      list: {},
      mode: 4, // 1:白名单  2.普通 白名单为[]
      mlist: [], // 白名单
      price: 2000, // 价格
      unit:'USDT',
      Maxnum: 0, // 当前铸造数量
      Max: 500, // 最大可铸造的数量
      mp4: true, // 是否是视频
      contAddress: ADDRESS_NFT,
      nftImg:Img,
      bsImg:Img,
      bdshow: false,
      plandata: {},
      sqnum: 0,
      Parent: false,
      Mbdshow:false,
      myNum: 0,
      myUsdt:0,
      MintMax:10
      
    };
  },
  components: {
    mtop,
    mbottom,
    buy,
    Binding
  },
  computed: {
    // 用户地址
    userWallet() {
      if (this.$store.getters.userWallet) {
        return this.$store.getters.userWallet.replace(
          /(\w{8})\w+(\w{8})/,
          "$1...$2"
        );
      } else {
        return "";
      }
    },
       dqyy() {
      if (this.$store.getters.language) {
        return this.$store.getters.language;
      } else {
        return "zh-CN";
      }
    },
    // 登陆类型
    type() {
      if (this.$store.getters.ltype) {
        return this.$store.getters.ltype
      } else {
        return "1";
      }
    },
  },
    filters: {
    // 用户地址
    yingcang(e) {
      if (e) {
        return e.replace(
          /(\w{8})\w+(\w{8})/,
          "$1******$2"
        );
      } else {
        return "";
      }
    },
  },
  mounted() {
    if (this._isMobile()) {
      this.show = true;
    } else {
      this.show = this.$store.getters.phone;
    }
  },
  created() {
    let i = setInterval(() => {
      if ((typeof window.ethereum) !== 'undefined') {   
        // console.log((typeof window.ethereum));       
        this.getTotal()
        clearInterval(i)
    }
}, 1000); 
   
  },
  watch: {
    "$store.getters.phone": function (val) {
      this.show = val;
    },
    "$store.getters.sid": function (val) {
      this.handleFiexdToolItem(val);
    },
    "$store.getters.userWallet": function () {
      this.getTotal();
    },

    deep: true,
    immediate: true,
  },
  methods: {

      jsmint(){
      if(this.buynum>0){
        this.mintDisabled=false
      }else{
       this.mintDisabled=true
      }
    },
    togetApprove() { 
      getApprove(this.$store.getters.userWallet, this.type).then(res => {
        this.sqnum=res
      })
    },
    fistLoad(){
      this.getTotal(); 
    },
    tourl(e) {
      window.open(e);
    },
    handleFiexdToolItem(e) {
      if (!e) {
        return;
      }
      this.$nextTick(() => {
        document.getElementById(e).scrollIntoView({
          behavior: "smooth",
          block: "start",
          inline: "nearest",
        });
      });
    },
    _isMobile() {
      let flag = navigator.userAgent.match(
        /(phone|pod|iPhone|iPod|ios|Android|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
      );
      return flag;
    },
    // 关联钱包
    wallet() {
      var i = 0;
      var a = setInterval(() => {
        if (typeof window.ethereum !== "undefined") {
          connectTron().then(
            (info) => {
              clearInterval(a);
              if (info[0].indexOf("0x") == 0) {
                // console.log(info[0]);
                this.$store.commit("userWallet", info[0]);

                // 账户存到后台
                let time = new Date().getTime();
                let str1 = 'I0wgjYDj';
                let str2 = '$fwFq7QgPm5Gui7';
                let str3 = 'jqged!%gO';
                
                let sha256 = this.$sha256(time + str1 + str2 + str3);

                this.$axios({
                  method: "POST",
                  url: `/api/accounts?sign=${sha256}&t=${time}`,
                  data: {
                    address: this.userWallet
                  }
                }).then((response) => {
                  // console.log(response,77777777)
                  // this.$toast.success('关联成功！');
                })
              } else {
                this.$notify("Use the ETH address to log in to the game");
              }
            },
            (e) => {
              // this.$notify(e.message);
            }
          );
        }
        if (i > 5) {
          clearInterval(a);
        }
        i++;
      }, 1000);
    },
    sign() { 
      toSing(this.$store.getters.userWallet).then(res=>{console.log(res);})
    },
    // 获取模式   
  
  async  getTotal(){   
      this.Maxnum = await gettotal().then((res) => {return res})
      this.MintMax= await getnumLimitPerMint().then(res=>{ return res  }) 
      this.Max= await getmaxTokenNum().then(res=>{ return res  })
      this.price =await getPrice().then((res) => { return res })
      if (this.Maxnum >= this.Max) {
          this.Cbuy = false;
        }
    },

    down() {
      window.open(
        "https://xinrunkeji.oss-cn-beijing.aliyuncs.com/xingkewallet/xkwallet.apk"
      );
    },
    no() {
      this.$notify(this.$i18n.t("m.jqqd"));
    },
    topage(e) {
      this.$router.replace({ path: e });
    },
    toCread() {},
    // 加
    up() {
      if (this.sqloading || !this.Cmint) {
        return;
      }
      this.buynum =
        this.buynum <= this.Max ? this.Max : Number(this.buynum) + 1;
    },
    // 减
    dow() {
      if (this.sqloading || !this.Cmint) {
        return;
      }
      this.buynum = this.buynum <= 1 ? 1 : Number(this.buynum) - 1;
    },
    toMints(e){
                this.Mintshow = true;
                  this.Cmint = true;
                  this.sqloading = false;
                  this.mintDisabled = false;
    },
  async  bftoMint() { 
    
      if (this.buynum > 0) {    
        this.sqloading=true 
        this.Parent = await getCost(this.$store.getters.userWallet, this.type).then((res) => { return res})
         this.sqnum = await  getApprove(this.$store.getters.userWallet, this.type).then(res => { return res})      
        this.myUsdt= await getmyUsdt(this.$store.getters.userWallet).then(res=>{return res})
        console.log('bf-------',this.Parent,this.sqnum,this.myUsdt );
        if (this.myUsdt - this.buynum * this.price >= 0) {
          if(this.Parent){    
            if (this.bdshow) { this.bdshow = false }
          setTimeout(() => {
            this.plandata={num:this.buynum}
            this.bdshow = true
            this.sqloading=false
          }, 100);        
      
          }else{
            if (this.Mbdshow) { this.Mbdshow = false }
          setTimeout(() => {
            this.plandata={num:this.buynum,price:this.buynum*this.price}
            this.Mbdshow = true
            this.sqloading=false
          }, 100);
        }
          // this.toMint()
        } else {
           this.sqloading=false
          this.$notify(this.$i18n.t('m.nindeubugouyizhifu'))
        }
      }
    },
  async  toMint(e) {
      this.mintDisabled = true;
      //  this.list.length = this.buynum;
// this.Mintshow = true;
      // this.Mintshow=true
      // this.getList()
      // return

      // 判断mode  mode: 1  白名单列表   2 正常铸造   3 售罄
      // if (this.buynum <= 0 || this.sqloading) {
      //   return;
      // }
      this.sqloading = true;
      let userWallet = this.$store.getters.userWallet;
      let num = this.buynum*this.price;
   
      // console.log('type------------',this.sqnum, num > 0);
      if (this.sqnum - num > 0) {
          ConstructMerkleTree(userWallet, this.buynum, this.type,e)
              .then((res) => {
                // console.log(res, 56566);

                if (res) {
                  // this.getList();
                  this.Mintshow = true;
                  this.Cmint = true;
                  this.sqloading = false;
                  this.mintDisabled = false;
                } else {
                  this.Cmint = false;
                  this.sqloading = false;
                  this.mintDisabled = false;
                  this.$notify(this.$i18n.t('m.zhhuzaoshibai'))
                }
              })
              .catch(() => {
                this.mintDisabled = false;
                this.sqloading = false;
              });
       } else {
        setApprove(this.$store.getters.userWallet, num, this.type).then((response) => {
          // console.log(response,90909090)  
          if (response) {
            ConstructMerkleTree(userWallet, this.buynum, this.type,e)
              .then((res) => {
                // console.log(res, 56566);
                
                if (res) {
                  // this.getList();

                  this.Mintshow = true;
                  this.Cmint = true;
                  this.mintDisabled = false;
                    this.sqloading = false;
                } else {
                  this.Cmint = false;
                  this.sqloading = false;
                  this.mintDisabled = false;
                  this.$notify(this.$i18n.t('m.goumaishibai'))
                }
              })
              .catch(() => {
                this.mintDisabled = false;
                this.sqloading = false;
              });
          } else {
            this.$notify(this.$i18n.t('m.shouquanshibai'))
            this.mintDisabled = false;
            this.sqloading = false;
          }
        })
      }
    },
    // 获取当前用户所有NFT
    getList() {
      // this.list = {};      

      walletOfOwner(this.$store.getters.userWallet).then((res) => {
        // console.log("res",res);
       this.myNum=res
       
      });
    },

    getUrl(e) {
      tokenURI(e).then((res) => {
        // console.log("url", res);
        // let regs = new RegExp("https://ipfs.io/", "g");
        // var urls = res.replace(regs, "https://www.cupidlovemetaverse.com/");
        this.$axios({
          method: "GET",
          url: res,
        }).then((response) => {
          // console.log(response.data);
          let reg = new RegExp("ipfs://", "g");
          var url = response.data.image.replace(
            reg,
            "https://gateway.fastiii.top/ipfs/"
          );
          // console.log(url);
         
          this.list[e] =  {'image':url,id:'PCLD#'+e}
          // console.log("list", this.list);
          this.sqloading = false;
          this.$forceUpdate();
        });
      });
    },
    close() {
      gettotal(0).then((res) => {
        if (res >= 30000) {
          this.Cbuy = false;
        }
        this.Maxnum = res;
      });
      this.mintDisabled = false     
      this.Mintshow = false;
       this.buynum=''
    },
  },
};
</script>

<style lang="scss" scoped>
$t-f: "DINPro";

.main {
  background: #ffffff;
  .sheader {
    background: url("../assets/img/bg.png") no-repeat top center;
    background-size: cover;
    // min-height: 500px;
    width: 100%;
    .haerbox{
      // background: rgb(23 23 25 / 56%);
      width: 100%;
      height: 100%;
      min-height: 588px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
          padding-bottom: 20px;
          .title{
            width: 524px;
            font-size: 44px;
font-family: PingFang SC, PingFang SC-Semibold;
font-weight: 600;
text-align: right;
color: #ffffff;
margin-top:120px;
text-align: center;
          }
    .banner-title {
      font-size: 34px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      line-height: 50px;
      color: #ffffff;
      margin-top:68px;
      margin-bottom: 18px;
      //   margin-left: 320px;
    }
       .cop {
     width: 670px;
// min-height: 136px;
font-size: 24px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FFFFFF;
line-height: 34px;
text-align: left;
letter-spacing: 1px;
// margin: 13px auto 13px;
      }
    p {
      width: 840px;
      font-size: 26px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      line-height: 37px;
      color: #ffffff;
      text-align: left;
      margin: 0 auto;
    }
    }
  }
  .sbtn {
    background: #171719;
    // background: #000000;
    height: 53px;
    width: 100%;
  }
  .gray {
    background: #c8c8c8;
    padding: 50px 0;
    min-height: 746px;
    display: flex;
    align-items: center;
    justify-content: center;
    .tt4 {
      font-size: 30px;
      font-family: $t-f;
      font-weight: 600;
      color: #000000;
      line-height: 42px;
    }
    .img2 {
      // width: 100%;
    }
  }

  .white {
    // min-height: calc(100vh - 70px);
    padding: 50px 0 0;
    // display: flex;
    // align-items: center;
    .card {
      //   width: 1100px;
      display: flex;
      align-items: center;
      margin: 0 auto;
      justify-content: center;

      .box {
        width: 100%;
        .intro {
          display: flex;
          justify-content: space-between;
          align-items: center;      
          .middle {
            width: 100%;
           min-height: 647px;
            background: #F7F8FB;
            border-radius: 20px;
            border: 1px solid #e6e8ec;
            display: flex;
            margin: 32px;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            .p1 {
              font-size: 30px;
              font-family: PingFangSC-Semibold, PingFang SC;
              font-weight: 600;
              color: #192638;
              line-height: 42px;
              margin-bottom: 10px;
              .dw{
                font-size: 20px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
line-height: 28px;
              }
            }
            .p2 {
              font-size: 16px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #556370;
              line-height: 25px;
              margin-bottom: 46px;
            }
            .p3 {
              font-size: 30px;
              font-family: PingFangSC-Semibold, PingFang SC;
              font-weight: 600;
              color: #192638;
              line-height: 42px;
              margin-bottom: 20px;
              img {
                width: 21px;
                height: 21px;
                margin-right: 8px;
              }
              .dew{
                font-size: 23px;
                margin-left: 10px;
              }
            }
            .check-btn {
              width: 400px;
              height: 60px;
             background: #0C81DB;
              border-radius: 62px;
              font-size: 16px;
              font-family: PingFangSC-Semibold, PingFang SC;
              font-weight: 600;
              color: #ffffff;
              line-height: 60px;
              text-align: center;
              margin-top: 20px;
              margin-bottom: 26px;
              cursor: pointer;
              border: 0;
            }
            .nos{
              background: #c9c9c9;
            }
            .p4 {
              font-size: 16px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #556370;
              line-height: 25px;
            }
          }     
                .img1 {
              width: 195px;
              height: 195px;
               border-radius: 100%;
            }
        }
      }
    }
  }

  .rule {
    padding: 50px 32px 60px;
    margin: 0 auto;
    .card {
      width: 100%;
      margin: 0 auto 39px;
      text-align: left;
      font-size: 26px;

 .hcbg{
        // background: url('../assets/img/hcgzbg.png') no-repeat;
        background-size: 100% 100%;
        height: 84px;
        width: 100%;
        font-size: 28px;
font-weight: 600;
color: #333333;
line-height: 34px;
display: flex;
align-items: center;
// padding-left: 60px;
box-sizing: border-box;
      }
      .gzbg{
        width: 100%;
        height: 100%;
        margin-top: 22px;
      }
      .p {
        width: 1096px;
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #556370;
        line-height: 25px;
      }
      .ns{
        text-indent: 82px;
      }
    }
  }

  .hzhb {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    .tt {
      font-size: 38px;
      font-family: $t-f;
      font-weight: bold;
    }
    img {
      width: 1112px;
      height: 351px;
      margin: 71px auto;
    }
  }
  .popup {
    // width: 1200px;
    // background: #171719;
    // border: 6px solid #78c2fa;
    background: #ffffff;
    border-radius: 20px;
    // border: 1px solid #777777;
    .title {
      height: 64px;
      font-size: 28px;
      font-weight: 600;
      color: #2A2B52;
      margin-top: 20px;
    }
    .vant-icon{
      background: #ffffff;
    border: 1px solid #f8f8f8;
    padding: 5px;
    border-radius: 100%;
    font-size: 10px !important;
    }
    .boxs {
      padding: 10px 30px;
     
      overflow: auto;
      display: flex;
      flex-flow: wrap;
      justify-content: space-between;
     
      .item {
        // height: 350px;
        // width: 270px;
        background: #D8D8D8;
        height: 482px;
      width: 482px;
        margin: 20px;
        position: relative;
        border-radius: 16px;
        display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
      }
      // .item:last-child {

      // }
      .sbg {
       height: 340px;
        width: 340px;
        border-radius: 10px;
        cursor: pointer;
      }

      .mbg {
        height: 482px;
        width: 482px;
        border-radius: 20px;
        // border: 1px solid #a5a6a7;
        display: flex;
        align-items: center;
        justify-content: center;
        .img {
          height: 482px;
          width: 482px;
          border-radius: 20px;
        }
      }
      .mbg1{
         height: 340px;
        width: 340px;
        border-radius: 20px;
        // border: 1px solid #a5a6a7;
        display: flex;
        align-items: center;
        justify-content: center;
        .img {
         height: 340px;
        width: 340px;
          border-radius: 20px;
        }
      }
      .zzz {
        position: absolute;
        z-index: 9;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 32px;
        font-weight: 500;
        font-family: $t-f;
        color: #000000;
        line-height: 34px;
        white-space: nowrap;
      }
     .bh {
        // min-width: 100px;
        font-size: 28px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        margin-bottom: 24px;
        position: absolute;
        top: 22px;
        right: 22px;
        .gxtxt{
font-size: 28px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #ffffff;
line-height: 40px;
text-shadow: 0px 2px 4px  rgba(0,0,0,0.50); 
        }
        .idtxt{
font-size: 32px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #ffffff;
line-height: 28px;
text-shadow: 0px 2px 4px  rgba(0,0,0,0.50); 
        }
      }
      .bhs {
        min-width: 100px;
            position: absolute;
    bottom: 0;
    width: 100% ;
    border-radius: 0 0 20px 20px;
   height: 56px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);

        .gxtxt{
font-size: 28px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #2A2B52;
line-height: 40px;
        }
        .idtxt{
    font-size: 24px;
font-family: Helvetica;
color: #FFFFFF;
text-align: center;
line-height: 56px;
        }
      }
    
    }
     .mh{
      height: auto;
    }
    .ah{
      min-height: 100px;
      height: auto;
    }
    .bottom {
      // background: #ffffff;
      height: 120px;
      .btn {
       width: 400px;
              height: 60px;
             background: #0C81DB;
              border-radius: 62px;
              font-size: 16px;
              font-family: PingFangSC-Semibold, PingFang SC;
              font-weight: 600;
              color: #ffffff;
              line-height: 60px;
              text-align: center;
              margin-top: 20px;
              margin-bottom: 26px;
              cursor: pointer;
              border: 0;
      }
    }
  }
  .popuph5 {
    width: calc(100vw - 100px);
    .title{
      font-size: 32px;
      margin-top: 48px;
      height: 40px;
    }
    .boxs {
      justify-content: center;
   
     .mbg1{
        width: 590px;
        height: 590px;
        .img{
          width: 590px;
          height: 590px;
        }
      }
    }
    .bh{
      font-size: 36px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #2A2B52;

.gxtxt{
font-size: 36px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #2A2B52;
line-height: 50px;
}
.idtxt{
font-size: 24px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #2A2B52;
line-height: 34px;
}
    }
       .bottom{
    width: 100%;
    background: #ffffff;
    padding-bottom: 80px;
      .btn{
width: 400px;
height:88px;
font-size:32px
      }
    }
  }

  .h5 {
    .sheader{
    }
    .banner-title {
      width: 670px;
      padding: 0px 20px 0;
      font-size: 36px;
      font-family: Arial-BoldMT, Arial;
      font-weight: normal;
      color: #ffffff;
      margin: 0 auto;
      line-height: 36px;
      text-align: left;
      
    }
    .cop {
     width: 670px;
// min-height: 136px;
font-size: 24px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FFFFFF;
line-height: 34px;
text-align: left;
// margin: 13px auto 13px;
      }
    .header {
      width: 100%;
      padding-top: 100px;
      background: linear-gradient(
        -65deg,
        #ebecff 0%,
        #f8f9fd 67%,
        #e8fafc 100%
      );
      .left {
        // background: url('../assets/imgh/stop.png') no-repeat;
        background-size: 253px 267px;
        height: 267px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        padding-left: 60px;
        .tt1 {
          font-size: 50px;
          font-family: $t-f;
          font-weight: bold;
          color: #4458fe;
        }
        .tt2 {
          font-size: 33px;
          font-family: $t-f;
          font-weight: bold;
          color: #333333;
        }
      }
      .right {
        img {
          width: 100%;
        }
      }
    }

    .cardh {
      .left {
        margin: 31px 61px;
        .tt1 {
          font-size: 42px;
          font-family: $t-f;
          font-weight: bold;
          color: #4458fe;
        }
        .tt2 {
          font-size: 42px;
          font-family: $t-f;
          font-weight: bold;
          color: #333333;
          margin-top: 17px;
          margin-bottom: 30px;
        }
        .tt3 {
          font-size: 25px;
          font-family: $t-f;
          font-weight: 400;
          color: #333333;
        }
      }
      .right {
        margin-top: 31px;
        img {
          width: 100%;
        }
      }
    }
    .cs {
      background: linear-gradient(38deg, #faf1ec 0%, #eeeef9 52%);
      margin-top: -34px;
      padding-top: 34px;
    }
    .shzhb {
      width: 100%;
      margin: 50px auto;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      .tt {
        font-size: 38px;
        font-family: $t-f;
        font-weight: bold;
      }
      img {
        width: 698px;
        height: 219px;
        margin: 71px auto;
      }
    }
 
  }
  .h5 {
    .sheader {
      .herder {
        width: 100%;
        .left {
          width: calc(100% - 40px);
          margin: 20px;
          .box {
            width: calc(100% - 80px);
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 40px;
            .stip {
              font-size: 23px;
              margin-bottom: 10px;
              margin-right: 0;
            }
            .mint {
              margin-left: 0;
              .input {
                margin-right: 30px;
              }
            }
            .creadw {
              margin-left: 0;
            }
            .middle {
              margin-right: 0;
            }
          }
        }
      }
    }
    .white {
      padding: 0;
      h3 {
        font-size: 26px;
      }
      .card {
        flex-direction: column;
        .box {
          flex-direction: column;
          .intro {
            flex-direction: column;
            .middle {
              margin:24px 0;
                .mint {
              margin-left: 0;
            ::v-deep .van-stepper__input {
                font-size: 30px;
              }
            }
            }
            .middle {
              border-radius: 0;
              padding: 80px 0;
              height: auto;
              // width: 690px;
              background: #f7fbff;
// border-radius: 16px;
border: 1px solid #E8E8E8;
.imglist{
  display: flex;
  align-items: center;
  .img1{
    width: 160px;
    height: 160px;
     border-radius: 100%;
  }
  .img1:nth-child(2){
    margin-left: -50px;
    border-radius: 100%;
    border: 2px solid #ffffff;
  }
}
              .p1{
                font-size: 60px;
                font-weight: 600;
                color: #192638;
                line-height: 84px;
                margin: 56px 0 10px;
              }
              .p2{
                font-size: 32px;
                font-weight: 400;
                color: #556370;
                line-height: 50px;
              }
              .p3{
                font-size: 60px;
                font-weight: 600;
                color: #192638;
                line-height: 84px;
                display: flex;
                align-items: center;  
                img{
                  width: 44px;
                  height: 44px;
                  margin-right: 8px;
                }
              }
              .check-btn{
                margin:42px 0 24px;
               width: 400px;
height: 84px;
line-height: 84px;
font-size: 32px;
font-weight: 600;

              }
            }
          }
        }
      }
    }
    .rule {
      padding: 50px 32px 60px;
height: 400px;
background: #f7fbff;
border: 1px solid #e6e8ec;
      .p{
      width: 670px;
      font-size: 28px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #556370;
      line-height: 50px;
      margin: 10px 0;
      }
    }
  }
}
</style>